<template>
	<view class="container">

		<view class="" v-if="!flag">
			<!-- <view class="" v-if="flag"> -->
			<!-- 公司介绍 -->
			<view class="company_profile">
				<view class="company_left">
					<image class="company_img" src="/static/images/gongsi.png"></image>
					<text>公司介紹</text>
				</view>
				<view class="company_right" @tap="change_about_us">查看</view>
			</view>

			<view class="info">
				<view class="info_item">
					<view class="info_item_text">所在城市<text style="color: #999;">（或意向開店城市）</text></view>
					<!-- <input class="into_inp" v-model="city" type="text" placeholder="請輸入您所在城市"
						placeholder-style="font-size:22rpx;color:#999;"> -->
					<!-- <uni-section> -->
					<view class="example-body into_inp">
						<uni-combox v-model="city" :border="false" :candidates="candidates"
							placeholder="請選擇所在城市"></uni-combox>
					</view>
					<!-- </uni-section> -->
				</view>


				<view class="info_item">
					<view class="info_item_text">您的姓名</view>
					<input class="into_inp" v-model="user_name" type="text" placeholder="請輸入您的姓名"
						placeholder-style="font-size:22rpx;color:#999;">
				</view>
				<view class="info_item">
					<view class="info_item_text">您的電話</view>
					<input class="into_inp" v-model="mobile" type="text" placeholder="請輸入您的電話號碼"
						placeholder-style="font-size:22rpx;color:#999;">
				</view>
				<view class="info_item">
					<view class="info_item_text">留言建議<text style="color: #999;">（可不填）</text></view>
					<input class="into_inp" v-model="msg" type="text" placeholder="選填"
						placeholder-style="font-size:22rpx;color:#999;">
				</view>
			</view>

			<view class="prompt">*提提交表單申請，工作人員將在3個工作日內與您聯繫</view>
			<view class="prompt">*如需及時了解，請直接電話諮詢，客服人員將第一時間解答</view>

			<view class="join_btns">
				<view class="join_btns_btn" @tap="submit_application">提交申請</view>
				<view class="join_btns_btn">聯繫我們</view>
			</view>
		</view>

		<view class="examine" v-else>
			<text v-if="status==0">審核中</text>
			<text v-if="status==1">審核通過</text>
			<text v-if="status==2">審核失敗</text>
		</view>

	</view>
</template>

<script>
	import {
		getUserJoin,
		applyUserJoin,
		getCityAll
	} from '@/api/index.js'
	export default {
		data() {
			return {
				city: "",
				user_name: "",
				mobile: "",
				msg: "",

				// 是否已經提交審覈  0--待審覈   1--審覈通過   2--審覈失敗
				status: "",
				// 判斷是否已經提交過審覈   false--沒有提交加盟   true--提交加盟申請
				flag: false,
				candidates: [],
				cityAll: [],
			};
		},
		methods: {
			submit_application() {
				// console.log(this.city)
				let city_id = this.cityAll.filter(item => item.name == this.city)[0].id

				if(this.city == ''){
					uni.showToast({
						title:'請選擇城市',
						icon:'none'
					})
				} else if(this.user_name==''){
					uni.showToast({
						title:'請輸入姓名',
						icon:'none'
					})
				} else if(this.mobile == ''){
					uni.showToast({
						title:'請輸入手機號',
						icon:'none'
					})
				} else {
					applyUserJoin({
						city: city_id,
						name: this.user_name,
						mobile: this.mobile,
						msg: this.msg,
						// token: uni.getStorageSync('ONEtoken')
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
					
							setTimeout(() => {
								this.status = 0
								this.flag = true
							}, 2000)
					
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					
					})
				}
				
				


			},
			change_about_us() {
				uni.navigateTo({
					url: '/pages/about_us/about_us'
				})
			}
		},
		onLoad() {

			getCityAll().then(res => {
				// console.log(res.data, "所有城市")
				this.cityAll = res.data
				this.candidates = res.data.map(item => item.name)
			})

			getUserJoin().then(res => {
				// console.log(res, "加盟信息")
				if (res.code) {
					this.flag = true
					this.status = res.data.status
				} else {
					this.flag = false
				}
			})


		}
	}
</script>

<style lang="less">
	.container {
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		background: #FFF;
		height: calc(100vh - 90rpx);
	}

	.company_profile {
		display: flex;
		justify-content: space-between;
	}

	.company_left {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.company_img {
		width: 72rpx;
		height: 64rpx;
		margin-right: 10rpx;
	}

	.company_right {
		width: 108rpx;
		height: 53rpx;
		background: #39B19D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #39B19D;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		line-height: 53rpx;
	}

	.info {
		margin-top: 35rpx;
	}

	.info_item {
		border-bottom: 1rpx solid #F2F2F2;
		margin-bottom: 30rpx;
	}

	.info_item_text {
		font-size: 28rpx;
	}

	.into_inp {
		margin: 18rpx 0 15rpx;
	}

	.prompt {
		/* width: 462rpx; */
		/* height: 28rpx; */
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 8rpx;
		/* line-height: 0rpx; */
		/* -webkit-background-clip: text; */
		/* -webkit-text-fill-color: transparent; */
	}

	.join_btns {
		margin-top: 141rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.join_btns_btn {
		width: 168rpx;
		height: 53rpx;
		background: #39B19D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #39B19D;
		color: #fff;
		text-align: center;
		line-height: 53rpx;
	}

	.examine {
		text-align: center;
		font-size: 40rpx;
		margin-top: 50rpx;
	}

	/deep/ .uni-combox__no-border {
		padding: 0 !important;
	}
</style>